<template>
	<view class="box">
		<swiper v-if='banner[cur].advert_pic' class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiper-item" v-for="item in banner[cur].advert_pic" :key="item.id">
				<image :src="item.pic_url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<scroll-view class="top" scroll-x>
			<text v-for="(item, index) in banner" :key="item.id" :class="index == cur ? 'cur' : ''" @click="setCur(index)">{{ item.name }}</text>
		</scroll-view>
		<view class="list">
			<view class="item" v-for="(item, index) in banner[cur].child" :key="item.id">
				<text>{{ item.subtitle }}/{{banner[cur].name}}</text>
				<text>{{ item.name }}</text>
				<view class="itemBody">
					<view class="ite" v-for="(ite, inde) in item.child" :key="ite.id" @click="router(ite.name)">
						<view class="img"><image :src="ite.pic_url" mode="aspectFill"></image></view>
						<view class="name">{{ ite.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cur: -1,
			banner: [],
			list: []
		};
	},
	methods: {
		setCur(index) {
			this.cur = index;
		},
		router(name) {
			uni.navigateTo({
				url: '/pages/cats/cats?&name=' + name
			});
		},
		getProduct(id) {
			this.$request({ url: this.$api.default.cat_list }).then(res => {
				if (res.code == 0) {
					this.banner = res.data.list;
					if (id) return this.cur = id
					this.cur = 0;
				}
			});
		}
	},
	created() {
		let id = uni.getStorageSync('id');
		if (id) return this.getProduct(id), uni.removeStorageSync('id');
		this.getProduct();
	},
	watch: {
		// async cur(value) {
		// 	this.list = [];
		// 	let arr = this.banner[this.cur].child;
		// 	for (let i = 0; i < arr.length; i++) {
		// 		//console.log(arr[i].id);
		// 		let res = await this.$request({ url: this.$api.default.goods_list + `&cat_id=${arr[i].id}&limit=8` });
		// 		if (res.code == 0) {
		// 			this.list.push({
		// 				title: this.banner[value].child[i].name,
		// 				name: this.banner[value].name,
		// 				subtitle: this.banner[value].subtitle,
		// 				cat_id: arr[i].id,
		// 				list: res.data.list
		// 			});
		// 		}
		// 	}
		// 	console.log(this.list);
		// }
	}
};
</script>

<style lang="scss">
	
.more {
	text-align: center;
	font-size: 0.8em;
	margin-top: 20upx;
	margin-bottom: 80upx;
}
.cur {
	color: #000 !important;
	border-bottom: 1px solid !important;
}
.box {
	background-color: #fff;
	.swiper{
		width: 100%;
		height: 500upx;
		.swiper-item{
			width: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.top {
		white-space: nowrap;
		width: 750rpx;
		height: 99rpx;
		padding: 0 5rpx;
		flex-wrap: nowrap;
		box-sizing: border-box;
		text {
			display: inline-block;
			height: 97rpx;
			color: #999;
			padding-bottom: 10upx;
			line-height: 97rpx;
			font-size: 26rpx;
			margin: 0 19rpx;
			white-space: nowrap;
			border-bottom: 1rpx solid transparent;
		}
	}
	.list {
		padding: 24rpx 24rpx 0 24rpx;
		.item {
			margin: 30upx 0;
			text {
				display: block;
			
				line-height: 1.5em;
				text-align: center;
			}
			
			text:nth-child(1) {
				color: #737373;
				font-family: '黑体';
				letter-spacing: 4px;
				font-size: 24rpx;
			}
			
			text:nth-child(2) {
				font-size: 28rpx;
				color: #1a1915;
				font-family: '黑体';
				letter-spacing: 2px;
				font-weight: bold;
			}
			.itemBody {
				display: flex;
				margin-top: 20upx;
				justify-content: space-between;

				flex-wrap: wrap;
				.ite {
					border-radius: 16upx;
					overflow: hidden;
					margin: 20upx 0;
					width: 49%;
					background-color: #fff;
					box-shadow: #eee 0 0 6px 4px;
					.img {
						width: 100%;
						position: relative;
						background-color: #f6f6f6;
						padding-bottom: 100%;
						image {
							top: 50%;
							transform: translateY(-50%);
							position: absolute;
							width: 100%;
							max-width: 100%;
							height: 100%;
							height: 100%;
						}
					}
					.name {
						font-size: 0.8em;
						color: #737373;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-family: '黑体';
						padding: 10upx;
					}
				}
			}
		}
	}
}
</style>
